<template>
  <div id="wrapper">
    <nav class="navbar-default navbar-static-side" role="navigation">
      <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">
          <li class="nav-header" style="height: 155px;">
            <!-- <div class="dropdown profile-element">
              <a data-toggle="dropdown" class="dropdown-toggle">
                <span class="clear">
                  <span class="block m-t-xs">
                    <strong class="font-bold">zhang</strong>
                  </span>
                  <span class="text-muted text-xs block">
                    操作
                    <b class="caret"></b>
                  </span>
                </span>
              </a>
              <ul class="dropdown-menu animated fadeInUp m-t-xs">
                <li>
                  <a>我的信息</a>
                </li>
                <li class="divider"></li>
                <li>
                  <router-link to="/login">注销</router-link>
                </li>
              </ul>
            </div> -->
          </li>
          <li :class="{ 'active': $route.name == 'productDetail' }">
            <router-link :to="{ name: 'productDetail' }">
              <i class="fa fa-th-large"></i>
              <span class="nav-label">详情</span>
            </router-link>
          </li>
          <li :class="{ 'active': $route.name == 'product' }">
            <router-link :to="{ name: 'product' }">
              <i class="fa fa-folder"></i>
              <span class="nav-label">文件</span>
            </router-link>
          </li>
          <!-- <li>
            <a>
              <i class="fa fa-th-large"></i>
              <span class="nav-label">Dashboards</span>
              <span class="fa arrow"></span>
            </a>
            <ul class="nav nav-second-level collapse">
              <li>
                <a>Dashboard v.1</a>
              </li>
              <li>
                <a>
                  Dashboard v.5
                  <span class="label label-primary pull-right">NEW</span>
                </a>
              </li>
            </ul>
          </li> -->
          <!-- <li>
            <a>
              <i class="fa fa-envelope"></i>
              <span class="nav-label"> Mailbox </span>
              <span class="label label-warning pull-right">16/24</span>
            </a>
            <ul class="nav nav-second-level collapse">
              <li>
                <a>Inbox</a>
              </li>
            </ul>
          </li> -->
          <!-- <li>
            <a>
              <i class="fa fa-desktop"></i>
              <span class="nav-label">App Views</span>
              <span class="pull-right label label-primary">SPECIAL</span>
            </a>
            <ul class="nav nav-second-level">
              <li><a>Contacts</a></li>
              <li><a>Profile</a></li>
            </ul>
          </li> -->
          <!-- <li>
            <a>
              <i class="fa fa-globe"></i>
              <span class="nav-label">Miscellaneous</span>
              <span class="label label-info pull-right">NEW</span>
            </a>
            <ul class="nav nav-second-level collapse">
              <li><a>Notification</a></li>
              <li><a>Nestable list</a></li>
            </ul>
          </li> -->
          <!-- <li>
            <a>
              <i class="fa fa-sitemap"></i>
              <span class="nav-label"> Menu Levels </span>
              <span class="fa arrow"></span>
            </a>
            <ul class="nav nav-second-level collapse">
              <li>
                <a>
                  Third Level
                  <span class="fa arrow"></span>
                </a>
                <ul class="nav nav-third-level">
                  <li>
                    <a>Third Level Item</a>
                  </li>
                  <li>
                    <a>Third Level Item</a>
                  </li>
                  <li>
                    <a>Third Level Item</a>
                  </li>
                </ul>
              </li>
              <li>
                <a>Second Level Item</a>
              </li>
              <li>
                <a>Second Level Item</a></li>
              <li>
                <a>Second Level Item</a></li>
            </ul>
          </li> -->
          <!-- <li>
            <a>
              <i class="fa fa-magic"></i>
              <span class="nav-label"> CSS Animations </span>
              <span class="label label-info pull-right">62</span>
            </a>
          </li> -->
          <!-- <li class="landing_link">
            <a target="_blank">
              <i class="fa fa-star"></i>
              <span class="nav-label">Landing Page</span>
              <span class="label label-warning pull-right">NEW</span>
            </a>
          </li> -->
          <!-- <li class="special_link">
            <a>
              <i class="fa fa-database"></i>
              <span class="nav-label">Package</span>
            </a>
          </li> -->
        </ul>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
